<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>插槽的基本使用</title>
</head>
<body>
    <div id="root">
        <cpn><button>按钮</button></cpn>
        <cpn><span>傻蛋</span></cpn>
        <cpn><i>老总</i></cpn>
        <cpn><button>按钮</button></cpn>
        <cpn></cpn>
        <cpn>
            <!-- 一起把默认值给替换掉 -->
            <pre>Vue</pre>
            <strong>好家伙</strong>
            <u>niubi</u>
        </cpn>
    </div>
    <template id="cpn">
        <div>
            <h2>我是组件</h2>
            <p>我是组件哈哈哈哈</p>
            <!-- 插槽的基本使用 -->
            <!-- <slot></slot> -->
            <slot>默认值可以是其他标签</slot>
        </div>
    </template>
    <script src="../js/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#root',
            components: {
                cpn: {
                    template: '#cpn'
                }
            }
        })
    </script>
</body>
</html> 